<template>
	<view class="more">
		<navBar title="查看全部"></navBar>

		<view class="header">
			<view class="user flex_center">
				<image :src="user.avatar" mode="aspectFill"></image>
				<text class="hidden">{{user.nickname || '未知用户'}}</text>
			</view>

			<text class="text">你可选1作品进行投放</text>
		</view>

		<view class="acvite_list flex_center">
			<view class="acvite_item" v-for="(item,index) in list" :key="index" @click="onChooseActive(item)"
				:id="choose_id == item.id ? 'select' : ''">
				<image :src="item.image" mode="aspectFill" class="image"></image>
				<image v-show="choose_id == item.id" src="/static/public/select_s.png" mode="aspectFill"
					class="select_image"></image>
			</view>
		</view>

		<view class="btnbox flex_r_around">
			<view class="btn" @click="onSubmit">确认</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/compentents/navBar/navBar.vue'
	export default {
		components: {
			navBar,
		},
		data() {
			return {
				page: 1,
				total: 0,
				list: [],

				provider_id: 0,
				choose_id: 0,

				user: {},
			}
		},
		methods: {
			getList() {
				this.$get('/article/getSellGoodsArticle', {
					page: this.page,
				}).then(res => {
					this.list.push(...res.data.data);
				});
			},

			getUser() {
				this.user = uni.getStorageSync('user');
			},

			onChooseActive(item) {
				if(item.status == 2){
					this.choose_id = item.id;
				}else {
					this.$util.msg('该作品正在审核');
				}
			},

			onSubmit() {
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.onchoose(this.choose_id);
				this.$util.back();
			},
		},

		onLoad(option) {
			if (option.choose_id) {
				this.choose_id = option.choose_id;
			}

			this.getList();
			this.getUser();
		},

		onReachBottom() {
			if (this.total > this.list.length) {
				this.page++;
				this.getList();
			}
		},
		
	}
</script>

<style lang="less" scoped>
	.more {
		padding: 24rpx 24rpx 180rpx;
		min-height: 100vh;
		background: #FFFFFF;
	}

	.header {
		overflow: hidden;

		.user {
			overflow: hidden;

			image {
				width: 88rpx;
				height: 88rpx;
				background: #D8D8D8;
				border-radius: 44rpx;
				margin-right: 16rpx;
			}

			text {
				font-weight: 600;
				font-size: 32rpx;
				color: #131313;
				flex: 1;
			}
		}

		.text {
			font-size: 24rpx;
			color: #999999;
		}
	}

	.acvite_list {
		flex-wrap: wrap;
		flex-shrink: true;
		margin: 24rpx 0;

		.acvite_item {
			width: 220rpx;
			height: 290rpx;
			border-radius: 16rpx;
			border: 4rpx solid transparent;
			overflow: hidden;
			flex-shrink: 0;
			position: relative;
			margin: 6rpx;

			.image {
				width: 100%;
				height: 100%;
			}

			.select_image {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 8rpx;
				right: 8rpx;
			}

		}

		#select {
			border: 4rpx solid #FD2A53;
		}
	}

	.btnbox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 160rpx;
		padding-bottom: 60rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(230, 230, 230, 0.5);

		.btn {
			width: 686rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}
</style>